<template>
  <div style="width: 600px;margin: 30px auto 0;">
    <el-form ref="form" :rules="rules" :model="form" label-width="160px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="原密码" prop="oldPwd">
            <!-- 解决浏览器自动填充记住的账号密码问题 -->
            <el-input style="position: fixed; bottom: -9999px" />
            <el-input show-password v-model="form.oldPwd" placeholder="请输入原密码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="新密码" prop="newPwd">
            <el-input type="password" style="position: fixed; bottom: -9999px" />
            <el-input show-password v-model="form.newPwd" placeholder="请输入8位及以上数字、字母组合新密码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="确认密码" prop="newPwd2">
            <el-input type="password" style="position: fixed; bottom: -9999px" />
            <el-input show-password v-model="form.newPwd2" placeholder="请确认新密码" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit">立即提交</el-button>
      <el-button @click="resetForm('form')">重 置</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import { updatePassword } from '@/api/user'
import { validatePassword } from '@/utils/validate.js'
Vue.use(VXETable)
export default {
  name: 'UpdatePassword',
  components: {},
  data() {
    return {
      form: {
        oldPwd: '',
        newPwd: '',
        newPwd2: ''
      },
      rules: {
        oldPwd: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPwd: [
          {
            required: true,
            validator(rule, value, callback) {
              validatePassword(value)
                ? callback()
                : callback(new Error('新密码格式有误'))
            },
            trigger: 'blur'
          }
        ],
        newPwd2: [
          { required: true, message: '请确认新密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 提交
    funcSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if(this.form.newPwd === this.form.newPwd2) {
            const rLoading = this.openLoading();
            updatePassword(this.form)
              .then(response => {
                rLoading.close();
                this.$message({ message: response.msg, type: "success" });
              })
              .then(() => this.$refs["form"].resetFields());
          } else {
            this.$message({ message: '请确认新密码！', type: "warning" });
          }
        } else {
          return false
        }
      })
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 330px;
    float: right;
  }
</style>
